<div [class]="'el-alert el-alert--' + type + ' is-'+effect" 
    [@fadeAnimation]="!visible" 
    [class.is-center]="center" role="alert"> 
    <i [class]="'el-alert__icon ' + makeIconClass()" *ngIf="showIcon"></i>
    <div class="el-alert__content"> 
        <span [class]="'el-alert__title ' + makeTitleClass()">
            <ng-container *ngIf="titleTmp">
                <ng-template [ngTemplateOutlet]="titleTmp"></ng-template>
            </ng-container>
            <ng-container *ngIf="!titleTmp && title">
                {{title}}
            </ng-container>
        </span>
        <p class="el-alert__description" *ngIf="description">{{description}}</p>
        <p class="el-alert__description" *ngIf="!description">
            <!-- <ng-template [ngTemplateOutlet]="descriptionTmp"></ng-template> -->
            <ng-content></ng-content>
        </p> 
            <i class="el-alert__closebtn" *ngIf="closable" [class.is-customed]="closeText !== ''"
            [class.el-icon-close]="closeText === ''" (click)="clickHandle($event)"> {{closeText}} </i>
    </div>
</div>